<template>
	<view class="content bg-#F6F9F8 h-100vh photo_back">

		<!-- 	<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" theme="drak" /> -->
		<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />

		<view class="photo_setp4_1">
			<image :src="photo_img_list[this_index]" />
		</view>




		<scroll-view style="white-space: nowrap;" class="photo_setp4_2" scroll-x="true" show-scrollbar="false"
			lower-threshold="10" scroll-with-animation="true" @scrolltolower="moreInfo">

			<image :src="item" class="list_imgs_one " :class="index == this_index ? 'list_imgs_one_on' : ''"
				@click="clickThis(index)" v-for="(item, index) in photo_img_thumb_list" :key="index" />

		</scroll-view>

		<!-- <button text="分享" open-type="share">12111</button> -->


		<view class="photo_setp4_3">
			<view class="photo_setp4_3_1" @tap="navigateTo(`/pagesA/scenic_punch/log`)">探索更多</view>
			<view class="photo_setp4_3_2" @tap="download_img">
				<image src="/static/images/photo_32.png" />
			</view>
			<view class="photo_setp4_3_3" @tap="share_this()">
				<image src="../../static/images/photo_33.png" />
				<text>分享照片</text>
			</view>

			<view class="photo_setp4_3_4" v-if="!share_ok">
				<text>{{show_hint_text}}</text>
			</view>
		</view>





		<uni-popup ref="popup" type="bottom" border-radius="24px 24px 0 0">
			<view class="photo_setp4_5">

				<view class="photo_setp4_5_1">分享到</view>
				<view class="photo_setp4_5_2">
					<view class="photo_setp4_5_2_one" @tap="share_this(1,this_index)">
						<view class="photo_setp4_5_2_one_1">
							<image src="/static/images/photo_34.png" />
						</view>
						<view class="photo_setp4_5_2_one_2">
							微信好友
						</view>
					</view>

					<!-- <view class="photo_setp4_5_2_one"  open-type="share" style="background-color:transparent">
						<view class="photo_setp4_5_2_one_1">
							<image src="/static/images/photo_35.png"/>
						</view>
						<view class="photo_setp4_5_2_one_2">
							朋友圈
						</view>
					</view> -->
				</view>

			</view>

		</uni-popup>


	</view>

</template>

<script>
	import {
		navigateTo,
		navigateBack
	} from "@/hooks";
	import custom_navbar from "./components/photo.vue";
	import {
		aiPhotoInfo,
		aiPhotoList
	} from '@/api/home';
	// import uParse from '@/components/u-parse/u-parse.vue';
	import store from "@/store";



	export default {
		components: {
			custom_navbar
			// uParse
		},
		data() {
			return {

				navigateTo,
				navigateBack,
				navbar_title: "生成结果",
				statusBarHeight: 20,
				id: '',
				indicator: false,
				photoList: [],
				photo_img_list: [],
				photo_img_thumb_list: [],
				this_index: 0,
				photo_info: {},
				curPage: 0,
				total: 0,
				theme: 'drak',
				share_ok: 0,
				show_hint_text: ''


			};
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			},


		},


		mounted() {
			let that = this;
			const info = uni.getSystemInfoSync();
			that.statusBarHeight = info.statusBarHeight + 43;

		},

		onLoad(options) {

			this.id = options.id;
			this.getAiPhotoInfo();
			// this.getList();
			this.show_hint('完成分享即可下载照片')
		},


		onShow() {

		},


		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.theme = 'white';

			} else {

				this.theme = 'drak';
			}
		},

		methods: {
			// 获取头的高度
			getNavHeight(e) {
				this.NavHeight_infoHeight += e;
			},



			getAiPhotoInfo() {
				if (!this.id) {
					uni.showToast({
						title: 'ID错误',
						icon: 'none',
					});
					return false;
				}

				aiPhotoInfo({
					id: this.id
				}).then((res) => {
					let data = res.data;
					this.photo_info = data;
					this.photoList.push(data);
					this.clickThis(0);
					this.getList();

				});

			},


			moreInfo() {
				this.loadMore();
			},
			handleScroll(e) {
				console.log(e);
			},

			loadMore() {

				let isLoad = Math.ceil(this.total / 10) > this.curPage;
				if (isLoad) {
					this.getList();
				}
			},

			clickThis(index) {
				this.this_index = index;


				this.photo_img_list = [];
				this.photo_img_thumb_list = [];
				this.photoList.forEach((item) => {
					if (item.merge_img) {
						item.merge_img_full = this.rec_url + item.merge_img;
					}
					if (item.merge_thumbnail) {
						item.merge_thumbnail_full = this.rec_url + item.merge_thumbnail;
					}

					this.photo_img_list.push(item.merge_img_full);
					this.photo_img_thumb_list.push(item.merge_thumbnail_full);

				})

			},

			async getList() {
				let params = {
					page: this.curPage + 1,
					limit: 10,
					state: 'complete'

				};
				let res = await aiPhotoList(params);

				if (res.code == 200) {
					this.curPage = params.page;

					this.total = res.data.total;
					let datas = [...this.photoList];
					let data = res.data.data;
					let has = '';
					data.forEach((item, index) => {
						if (item.id == this.photo_info.id) {
							has = index;
							return true;
						}
					})

					if (has !== '') {
						data.splice(has, 1)
					}

					if (params.page > 1) {
						datas.push(...data)
					} else {
						datas = data;
						datas = [this.photo_info, ...datas];
					}
					datas.map(item => {
						if (item.merge_img) {
							item.merge_img_full = this.rec_url + item.merge_img;
						}
						if (item.merge_thumbnail) {
							item.merge_thumbnail_full = this.rec_url + item.merge_thumbnail;
						}


						return item;
					})
					this.photoList = datas;
					if (this.this_index === 0) {
						
						this.clickThis(0)
					}
				}
			},
			// onShareTimeline() {
			// 	return {
			// 		title: '鸣火',
			// 		path: "pages/tabbar/tabbar?share=微信会把分享到朋友圈的参数去掉，别想了！",
			// 		imageUrl: "../../static/logo.png",
			// 	};
			// },

			show_hint(text) {
				let has_share = uni.getStorageSync('image_share');
				if (has_share) {
					this.share_ok = 1;
				} else {
					this.share_ok = 0;
					this.show_hint_text = text;
				}
			},

			download_img() {
				let has_share = uni.getStorageSync('image_share');
				if (!has_share) {
					this.show_hint('请先分享再下载');
					return false;
				}

				let that = this
				//获取授权列表，查看是否授权写入相册权限
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									that.saveimgtoAlbum()
								}
							})
						} else {
							that.saveimgtoAlbum()
						}
					}
				})
			},



			saveimgtoAlbum() {
				//图片保存到本地
				let that = this
				uni.showLoading()

				let imgurl = this.photo_img_list[this.this_index];


				uni.downloadFile({
					url: imgurl,
					success(res) {
						let tmp = res.tempFilePath;

						uni.saveImageToPhotosAlbum({
							filePath: tmp,
							success: function(data) {
								uni.hideLoading()
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								})
							},
							fail: function(err) {
								uni.hideLoading()
								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
									uni.openSetting({
										success(settingdata) {
											if (settingdata.authSetting[
													'scope.writePhotosAlbum']) {
												uni.showToast({
													title: '您已授权成功，请重新保存',
													icon: 'success',
													duration: 2000
												})
											} else {
												uni.showToast({
													title: '尚未授权，无法保存',
													icon: 'none',
													duration: 2000
												})
											}
										}
									})
								}
							},
							complete(res) {
								console.log(res);
							}
						})

					}
				})




			},




			share_this(type, index) {
				uni.setStorageSync('image_share', 1);
				this.show_hint();
				let path = this.photo_img_list[index];
				this.$refs.popup.open('bottom');
				this.share_ok = 1;
				let that = this;
				uni.downloadFile({
					url: path,
					success(res) {
						let tmp = res.tempFilePath;
						if (type == 1) {
							//分享给朋友
							wx.showShareImageMenu({

								path: tmp,
								success: (res) => {
									console.log("分享成功:", res);
								},
								fail: (err) => {
									console.log("分享取消:", err);
								},
							})


						} else if (type == 2) {
							wx.showShareMenu({
								withShareTicket: true,
								menus: ['shareAppMessage', 'shareTimeline']
							})
						}

						that.$refs.popup.close();
					},
					fail: (err) => {
					    // 下载失败，handle error
					    console.log('下载文件失败：', err);
						console.log('下载文件失败：', path);
					  }
				})
				console.log(path);


			}
		}
	}
</script>

<style lang="scss" scoped>
	  @import './this.scss';
	
	image{
		width: 100%;
		height: 100%;
	}
	
	// --------------------------setp4------------------------
	
	.photo_setp4_1{
		width: 650rpx;
		height: 1000rpx;
		border-radius: 20rpx;
		
		margin: 50rpx auto 0 auto;
		image{
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}
	
	.photo_setp4_2{
		width: 700rpx;
		height: 172rpx;
		margin: 40rpx 25rpx 0 25rpx;
		
	}
	
	.list_imgs_one{
		
		width: 132rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		
	}
	.list_imgs_one_on{
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 4rpx solid #0CCA91;
		
		//border-image: linear-gradient(90deg, rgba(14.737371448427439, 187.57049024105072, 214.16020184755325, 1), rgba(12.114000767469406, 202.0173454284668, 144.92224752902985, 1)) 4 4;
	}
	
	.photo_setp4_3{
		
		height: 80rpx;
		width: 700rpx;
		margin: 60rpx auto 80rpx auto;
		display: flex;
		justify-content: space-between;
		
		.photo_setp4_3_1{
			width: 224rpx;
			height: 80rpx;
			background: linear-gradient( 90deg,  rgba(183,228,71,0.5) 0%, rgba(33,188,145,0.5) 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			color: #0CCA92;
			font-size: 30rpx;
			font-weight: 700;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		
		.photo_setp4_3_2{
			width: 78rpx;
			height: 78rpx;
			background: linear-gradient( 90deg, #0CCA91 0%, #0FBCD6 100%);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		
		.photo_setp4_3_3{
			width: 368rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #0CCA91 0%, #0FBCD6 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
			text{
				font-size: 30rpx;
				color: #fff;
				font-weight: 700;
			}
		}
		
	}
	
	
	.photo_setp4_5{
		width: 750rpx;
		height: 348rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		overflow: hidden;
		.photo_setp4_5_1{
			color: #3D3D3D;
			width: 90%;
			margin: 30rpx auto;
			font-size: 28rpx;
			font-weight: 400;
		}
		
		.photo_setp4_5_2{
			width: 90%;
			margin:0 auto;
			display: flex;
			justify-content: space-around;
			align-items: center;
			
			.photo_setp4_5_2_one{
				width: 112rpx;
				display: flex;
				flex-wrap: wrap;
				
				.photo_setp4_5_2_one_1{
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #F6F9F8; 
					image{
						border-radius: 50%;
						width: 68rpx;
						height: 68rpx;
					}
				}
				
				.photo_setp4_5_2_one_2{
					color: #666666;
					font-size: 24rpx;
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}
		}
	}
	
	
	.photo_setp4_3_4{
		
		z-index: 9;
		margin-top: -72rpx;
		background: url('/static/images/photo_36.png') no-repeat;
		background-size: 100% 100%;
		height: 63rpx;
		width: 270rpx;
		font-size: 24rpx;
		color: #3D3D3D;
		margin-left: 243rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		position: absolute;
		text{
			margin-top: -8rpx;
		}
	}
	
	.photo_setp4_3_5{
		width: 100%;
		height: 130rpx;
	}
	
</style>